<template>
  <div id="UserMessageView">
    <a-table
      :columns="columns"
      :data="data"
      :pagination="{
        showTotal: true,
        pageSize: pageInform.pageSize,
        current: pageInform.current,
        total,
      }"
      @page-change="pageChange"
    >
      <template #account="{ record }">
        <a-space :direction="'horizontal'">
          <a-avatar :imageUrl="record.userAvatar" :trigger-type="'button'">
          </a-avatar>
          {{ record.userAccount }}
        </a-space>
      </template>

      <template #userRole="{ record }">
        <a-space :direction="'horizontal'">
          <text>{{ record.userRole }}</text>
        </a-space>
      </template>

      <template #createTime="{ record }">
        <a-space>
          {{ moment(record.createTime).format("YYYY-MM-DD: HH:mm:ss") }}
        </a-space>
      </template>

      <template #updateTime="{ record }">
        <a-space>
          {{ moment(record.updateTime).format("YYYY-MM-DD: HH:mm:ss") }}
        </a-space>
      </template>

      <template #optional="{ record }">
        <a-space>
          <a-button type="primary" @click="doUpdate(record)">修改</a-button>
          <a-button status="danger" @click="doDelete(record)">
            <template #default>删除</template>
            <template #icon>
              <icon-delete />
            </template>
          </a-button>
        </a-space>
        <a-modal
          v-model:visible="visible"
          :title="form.userAccount"
          @cancel="handleCancel"
          @before-ok="handleBeforeOk"
        >
          <a-form :model="form">
            <a-form-item field="name" label="用户密码">
              <a-input v-model="form.userPassword" />
            </a-form-item>
            <a-form-item field="post" label="用户身份">
              <a-select v-model="form.userRole" @change="onChange">
                <a-option value="user">user</a-option>
                <a-option value="notLogin">notLogin</a-option>
                <a-option value="admin">admin</a-option>
              </a-select>
            </a-form-item>
          </a-form>
        </a-modal>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import {
  User,
  UserControllerService,
  UserQueryRequest,
  UserUpdateMyRequest,
} from "../../../generated";
import message from "@arco-design/web-vue/es/message";
import { IconDelete } from "@arco-design/web-vue/es/icon";
import { useRouter } from "vue-router";
import moment from "moment";
import * as cluster from "cluster";

const columns = [
  {
    title: "id",
    dataIndex: "id",
  },
  {
    title: "账号",
    slotName: "account",
  },
  {
    title: "用户身份",
    slotName: "userRole",
  },
  {
    title: "创建时间",
    slotName: "createTime",
  },
  {
    title: "修改时间时间",
    slotName: "updateTime",
  },
  {
    title: "操作",
    slotName: "optional",
  },
];

const pageInform = ref({
  current: 1,
  pageSize: 2,
} as UserQueryRequest);

const data = ref([]);
const total = ref();
const router = useRouter();
const visible = ref(false);
const form = reactive({
  id: 0,
  userAccount: "",
  userPassword: "",
  userRole: "user",
});

// 函数
const loads = async () => {
  const res = await UserControllerService.listUserByPageUsingPost(
    pageInform as User
  );
  if (res.code === 0) {
    data.value = res.data.records;
    total.value = Number(res.data.total);
  } else {
    message.error("数据出错" + res.message);
  }
};

onMounted(loads);

// 分页函数
const pageChange = (current: number) => {
  pageInform.value = {
    ...pageInform.value,
    current,
  };
  loads();
};
const onChange = (v: string) => {
  console.log(v);
  form.userRole = v;
};

const doUpdate = async (user: User) => {
  visible.value = true;
  form.userPassword = "";
  form.userRole = user.userRole as string;
  form.id = user.id as number;
  form.userAccount = user.userAccount as string;
};

const handleBeforeOk = async (done: any) => {
  console.log(form);
  const res = await UserControllerService.updateUserUsingPost(form);
  console.log(res);
  if (res.code === 0) {
    message.success("修改成功");
    data.value.forEach((item: User) => {
      if (item.id === form.id) {
        item.userRole = form.userRole as string;
      }
    });
  } else {
    message.success("修改失败" + res.message);
  }
  done();
};

const handleCancel = () => {
  visible.value = false;
};

const doDelete = async (user: User) => {
  const res = await UserControllerService.deleteUserUsingPost({
    id: user.id,
  });
  if (res.code === 0) {
    message.success("删除成功");
    data.value.filter((item, index) => {
      if (item.id === user.id) return false;
      return true;
    });
  } else {
    message.error("删除失败" + res.message);
  }
};
</script>

<style scoped>
#questionMessage {
}
</style>
